<template>
	<view>
		<!-- 		<cu-custom bgColor="bg-gradual-blue" :isBack="false" :paddingHeight="0">
			<block #backText>返回</block>
			<block #content>按钮</block>
		</cu-custom> -->
		
		<!-- 分类标签 -->
		<u-sticky bgColor="#fff" :offsetTop="0" :customNavHeight="0">
			<u-tabs :list="[
				{name:'兼职',path:'/market/market'},
				{name:'社区',path:'/market/social'},
				{name:'视频'},
				{name:'关注'}
			]" :current="tabIndex1" @click="onTab1Click"
				lineWidth="50rpx" lineHeight="8rpx" lineColor="#f56c6c" :activeStyle="{
			color: '#000000',
			fontWeight: 'bold',
			transform: 'scale(1.0)',
			fontSize:'35rpx',
			
		}" :inactiveStyle="{
			color: '#37383b',
			transform: 'scale(1.0)',
			fontSize:'35rpx'
		}" itemStyle="padding-left: 15px; padding-right: 15px;;height: 90rpx;"></u-tabs>
		</u-sticky>

		<!-- #ifdef H5 -->
			<simple-router-view  v-slot="{ Component, route }">
			    <keep-alive>
			      <component :is="Component"/>
			    </keep-alive>
			</simple-router-view>
		<!-- #endif -->
		
		<!-- #ifdef APP-->
			<simple-router-view  v-slot="{ Component, route }">
			    <component :is="Component"/>
			</simple-router-view>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
			<simple-router-view />
		<!-- #endif -->
	</view>

</template>

<script>
	import tabbs from '@/pages/tabbs/tabbas.vue'

	export default {
		components: {
			tabbs
		},
		methods: {
			onTab1Click(item) {
				if(item.path)
					this.$Router.replace(item.path)
					
					setTimeout(function() {
						uni.$emit('onShow', 1);
					}, 200); 
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep [class^="u-swiper__wrapper__item__wrapper__"] {
		height: 100% !important;
		// width: 100% !important;
	}
</style>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.nav_bar {
		height: var();
		width: 100%;
	}

	.u-page .__slot-icon {
		width: 17px;
		height: 17px;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>